﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <link href="~/css/shop.css" type="text/css" rel="stylesheet" />
    <link href="~/css/Sellerber.css" type="text/css" rel="stylesheet" />
    <link href="~/css/bkg_ui.css" type="text/css" rel="stylesheet" />
    <link href="~/font/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <script src="~/js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="~/js/jquery.cookie.js"></script>
    <script src="~/js/shopFrame.js" type="text/javascript"></script>
    <script src="~/js/Sellerber.js" type="text/javascript"></script>
    <script src="~/js/layer/layer.js" type="text/javascript"></script>
    <script src="~/js/laydate/laydate.js" type="text/javascript"></script>
    <script type="text/javascript" src="~/js/proTree.js"></script>
    <script src="~/js/dist/echarts.js" type="text/javascript"></script>

    <link rel="stylesheet" href="~/layui/css/layui.css" />
    <script src="~/layui/layui.js" type="text/javascript"></script>
    <script src="~/Scripts/timeTranslation.js" type="text/javascript"></script>
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js" type="text/javascript"></script>
    <script src="js/respond.min.js"></script>
    <script src="js/css3-mediaqueries.js"  type="text/javascript"></script>
      <![endif]-->
    <title>品牌管理</title>
</head>

<body>
    <div class="margin" id="page_style">
        <div class="operation clearfix mb15 same_module">
            <ul class="choice_search">
                <li class="clearfix col-xs-2 col-lg-3 col-ms-3 ">
                    <label class="label_name ">品牌名称：</label>
                    <input id="purName" placeholder="输入品牌名称" name="" type="text" class="form-control col-xs-8 col-lg-8 col-ms-8" />
                </li>
                <li class="clearfix col-xs-2 col-lg-3 col-ms-3">
                    <label class="label_name ">添加时间：</label>
                    <input class="inline laydate-icon form-control Select_Date" id="start" />
                </li>
                <li class="clearfix col-xs-2 col-lg-3 col-ms-3 ">
                    <button type="button"id="getLike" class="btn button_btn bg-deep-blue "><i class="icon-search"></i>查询</button>
                </li>
            </ul>
        </div>
        <div class="h_products_list clearfix mb15" id="Sellerber">
            <!--品牌列表-->
            <div class="list_Exhibition list_show padding15">
                <div class="operation clearfix mb15  same_module">
                    <span class="l_f">
                        <a href="/Home/Add_Brand" title="添加品牌" class="btn button_btn bg-deep-blue"><i class="fa fa-plus"></i>添加品牌</a>
                        <a href="javascript:ovid()" class="btn  button_btn btn-danger"><i class="fa fa-trash"></i>批量删除</a>
                    </span>
                </div>
                <div class=" datalist_show">
                    <div class="datatable_height confirm">
                        <table class="layui-hide" id="test" lay-filter="demo"></table>
                        <script id="barDemo" type="text/html">
                            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                        </script>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
<script>
    layui.use('table', function () {
        var table = layui.table
            , form = layui.form;  //启用
        table.render({
            elem: '#test'
            , url: '/Brand/GetBrandPageList'
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , cols: [[
                  { type: 'checkbox' }
                , { field: 'Id', width: 78, align: 'center', title: 'ID', sort: true }
                , { field: 'Logo', width: 100, align: 'center', title: '品牌LOGO',templet:"<div><img src={{d.Logo}} width='40' height='40'/></div>"}
                , { field: 'Name', width: 92, align: 'center', title: '品牌名称' }
                , { field: 'Counts', width: 78, align: 'center', title: '商品数量'}
                , { field: 'Status', width: 92, align: 'center', title: '状态',templet: '#switchTp1'}
                , { field: 'UpdateTime', width: 176, align: 'center', title: '加入时间', templet: "<div>{{Format(d.UpdateTime,'yyyy-MM-dd')}}</div>" }
                , { fixed: 'right', title: '操作', width: 208, align: 'center', toolbar: '#barDemo' }
            ]]
            , page: true
            , id: 'testReload'
        });
        //状态按钮
        form.on('switch(sexDemo1)', function (obj) {
            layer.msg("提示", { icon: 1, time: 1000, title: "mmomo" });
            var tip = "开启";
            var datas = {};
            datas.ID = this.id;

            //datas.Status = this.value;
            if (this.value === "1") {
                tip = "关闭";
                datas.Status = 0;
            }
            else {
                datas.Status = 1;
            }
            layer.confirm(tip + '吗', function (index) {
                $.ajax({
                    url: "/ArticleManagement/UpdateButton",
                    data: datas,
                    type: "Post",
                    success: function (data) {
                        if (data.Success) {
                            location.reload(); //刷新本页
                            layer.msg(tip + '成功！', {
                                title: '提示框',
                                icon: 1,
                                time: 2000
                            }, function () {
                                TableReload();
                                layer.close(index);
                            });
                        }
                        else {
                            layer.msg(tip + '失败！', {
                                title: '提示框',
                                icon: 1,
                                time: 2000
                            });
                        }
                    }
                });
            });
        });
        $("#getLike").click(function () {
            var table = layui.table;
             //获取页面的查询条件
            var wheres = $("#purName").val();
            var wheress = $("#start").val();
            //上述方qq1法等价于
            table.reload('testReload', {
                where: { //设定异步数据接口的额外参数，任意设
                    purName: wheres,
                    start:wheress,
                    //…
                }
            });
        });

         //监听工具
        table.on('tool(demo)', function (obj) {
            var data = obj.data;
            var id = data.Id;
            //删除
            if (obj.event === 'del') {
                var datas = {};
                datas.Id = id;
                layer.confirm('确认删除行？', function (index) {
                $.ajax({
                    url: "/Brand/DelBrand",
                    data: datas,
                    type: "post",
                    success: function (result) {
                       if (result.Success) {
                           layer.msg("删除成功");
                           location.reload();
                        }
                        else {
                           layer.msg("删除失败");
                        }
                    }
                })
                });
            //编辑
            } else if (obj.event === 'edit') {
                //通过控制器传值
                window.location.href='/Home/Update_Brand?id='+id
            }
        });
    });
</script>
<script type="text/html" id="switchTp1">
    <input type="checkbox" id="{{d.Id}}" name="Status" value="{{d.Status}}" lay-skin="switch" lay-text="上架|下架" lay-filter="sexDemo1" {{ d.Status == 1 ? 'checked' : '' }} />
</script>
<script>
    //设置内页框架布局
    $(function () {
        $("#Sellerber").frame({
            float: 'left',
            color_btn: '.skin_select',
            Sellerber_menu: '.list_content',
            page_content: '.list_show',//内容
            datalist: ".datatable_height",//数据列表高度取值
            header: 65,//顶部高度
            mwidth: 350,//宽度自定义
            minStatue: true,

        });
    });
    function generateOrders(id) {
        window.location.href = "Brand_detailed.html?=" + id;
    };
    /*品牌-查看*/
    function member_show(title, url, id, w, h) {
        layer_show(title, url, w, h);
    }
    /*品牌-停用*/
    /*产品-停用*/
    function member_stop(obj, id) {
        layer.confirm('确认要下架该品牌吗？该品牌下的所有产品将全部下架。', function (index) {
            $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" class="btn btn-xs " onClick="member_start(this,id)" href="javascript:;" title="上架">上架</a>');
            $(obj).parents("tr").find(".td-status").html('<span class="label label-defaunt radius">已下架</span>');
            $(obj).remove();
            layer.msg('已下架!', { icon: 5, time: 1000 });
        });
    }
    /*产品-启用*/
    function member_start(obj, id) {
        layer.confirm('确认要上架改该品牌吗？', function (index) {
            $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" class="btn btn-xs btn-status" onClick="member_stop(this,id)" href="javascript:;" title="下架">下架</a>');
            $(obj).parents("tr").find(".td-status").html('<span class="label label-success radius">已上架</span>');
            $(obj).remove();
            layer.msg('已上架!', { icon: 6, time: 1000 });
        });
    }
    /*产品-编辑*/
    function member_edit(title, url, id, w, h) {
        layer_show(title, url, w, h);
    }
    /*产品-删除*/
    function member_del(obj, id) {
        layer.confirm('确认要删除吗？', function (index) {
            $(obj).parents("tr").remove();
            layer.msg('已删除!', { icon: 1, time: 1000 });
        });
    }
    //设置时间
    laydate({
        elem: '#start',
        event: 'focus'
    });
</script>
<script type="text/javascript">
    require.config({
        paths: {
            echarts: './js/dist'
        }
    });
    require(
        [
            'echarts',
            'echarts/chart/pie',   // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
            'echarts/chart/funnel'
        ],
        function (ec) {
            var myChart = ec.init(document.getElementById('main'));

            option = {
                title: {
                    text: '国内国外品牌比例',
                    subtext: '',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    y: 'bottom',
                    x: 'center',
                    bottom: 30,
                    data: ['国内品牌', '国外品牌']
                },
                toolbox: {
                    show: false,
                    feature: {
                        mark: { show: false },
                        dataView: { show: false, readOnly: false },
                        magicType: {
                            show: true,
                            type: ['pie', 'funnel'],
                            option: {
                                funnel: {
                                    x: '25%',
                                    width: '50%',
                                    funnelAlign: 'left',
                                    max: 545
                                }
                            }
                        },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                calculable: true,
                series: [
                    {
                        name: '品牌数量',
                        type: 'pie',
                        radius: '45%',
                        center: ['50%', '50%'],
                        data: [
                            { value: 335, name: '国内品牌' },
                            { value: 210, name: '国外品牌' },

                        ]
                    }
                ]
            };
            myChart.setOption(option);
        }
    );
</script>